<script setup lang="ts">
import {onMounted, onUnmounted, reactive,ref} from "vue";
import dayjs from 'dayjs';
import type {DateDataType} from "./index.d"
import {useSettingStore} from "@/stores"
import {apiWeather} from "@/api";

const dateData = reactive<DateDataType>({
  dateDay: "",
  dateYear: "",
  dateWeek: "",
  timing:null
});

const timer = ref()

const { setSettingShow} =useSettingStore()
const weekday= ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
const timeFn = () => {
  dateData.timing = setInterval(() => {
    dateData.dateDay = dayjs().format("HH:mm:ss");
    dateData.dateYear = dayjs().format("YYYY-MM-DD");
    dateData.dateWeek = weekday[dayjs().day()];
  }, 1000);
};
timeFn()

const weather = ref<any>({})

const getWeather = async () => {
  const res = await apiWeather()
  weather.value = res.data?.result?.now
}

onMounted(()=>{
  getWeather()
  timer.value = setInterval(()=>{
    getWeather()
  },1000 * 60 * 10)
})

onUnmounted(()=>{
  if(dateData.timing) clearInterval(dateData.timing)
  if(timer.value) clearInterval(timer.value)
})
</script>

<template>
  <div class="d-flex jc-center title_wrap">
    <div class="zuojuxing"></div>
    <div class="youjuxing"></div>
    <div class="guang"></div>
    <div class="d-flex jc-center">
      <div class="title mt-[18px]">
        <span class="title-text ff-YouSheBiaoTiHei">京瑞居智能互联体测数据中心</span>
      </div>
    </div>
    <div class="timers text-[#1A1A1A]">
      <div class="text-[40px] mr-[24px] ff-DINAlternate-Bold">{{ dateData.dateDay }}</div>
      <div class="text-[14px]">
        <div> {{ dateData.dateYear }}</div>
        <div>{{ dateData.dateWeek }} </div>
      </div>
<!--      <div class="setting_icon"   @click="setSettingShow(true)">-->
<!--          <img src="@/assets/img/headers/setting.png" alt="设置">-->
<!--      </div>-->
    </div>
    <div class="absolute top-[50px] right-[190px] flex items-center">
      <img class="w-[22px] h-[22px]" src="@/assets/img/icon/20.png">
      <div class="text-[16px] text-[#1A1A1A] flex items-center ml-[10px] font-medium">
        <div>{{ weather?.text }}</div>
        <div class="ml-[24px]">{{weather?.feels_like}}℃</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.title_wrap {
  height: 159px;
  background-image: url("../assets/img/top.png");
  background-size: cover;
  background-position: center center;
  position: fixed;
  margin-bottom: 4px;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;

  //.guang {
  //  position: absolute;
  //  bottom: -26px;
  //  background-image: url("../assets/img/guang.png");
  //  background-position: 80px center;
  //  width: 100%;
  //  height: 56px;
  //}

  //.zuojuxing,
  //.youjuxing {
  //  position: absolute;
  //  top: -2px;
  //  width: 140px;
  //  height: 6px;
  //  background-image: url("../assets/img/headers/juxing1.png");
  //}

  .zuojuxing {
    left: 11%;
  }

  .youjuxing {
    right: 11%;
    transform: rotate(180deg);
  }

  .timers {
    position: absolute;
    left: 160px;
    top: 34px;
    font-size: 18px;
    display: flex;
    align-items: center;

    .setting_icon {
      width: 20px;
      height: 20px;
      cursor: pointer;
      margin-left: 12px;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
.title {
  position: relative;
  // width: 500px;
  text-align: center;
  background-size: cover;
  color: rgba(26, 26, 26, 1);
  height: 60px;
  line-height: 46px;

  .title-text {
    font-size: 48px;
    //letter-spacing: 6px;
  }
}
</style>
